<template>
  <!--  面包屑-->
  <el-breadcrumb v-if="data && data.length" :separator-icon="ArrowRight">
    <el-breadcrumb-item v-for="(item, index) in data" :key="index" @click="toPath(item)">
      <span :class="{ active: index === data.length - 1 }">{{ item.name }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const { data } = defineProps({
  data: Array
});
console.log(data);
watchEffect(() => {
  // console.log('面包屑:', data);
});
const router = useRouter();
const toPath = (e) => {
  if (e.component) {
    router.push(e.urlPath)
  }
}


</script>
<style scoped>
/* 激活状态的样式 */
.active {
  color: #035BEB;
}

span {
  font-size: 15px;
  padding-top: 5px;
  color: #828282;
}
</style>
